<template>
  <div class="dashboard-container">
    <el-card>
      <el-row type="flex">
        <el-col>
          <el-button type="success" @click="addFn">添加页面</el-button>
        </el-col>

        <el-input v-model="data" placeholder="请输入内容" @keyup.enter.native="inputFN" />
        <el-button @click="uppagesedit">筛选</el-button>
      </el-row>
      <el-divider />
      <el-table :data="formdata" border style="width: 100%">
        <el-table-column prop="title" label="标题" width="200" />
        <el-table-column prop="content" label="内容" width="700" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="success" @click="putTN(row.id)">编辑</el-button>
            <el-button type="danger" @click="delFn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="text-align: center"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="+tableData._limit"
        @size-change="handleSizeChange"
        @current-change="currentList"
      />
    </el-card>
    <el-dialog
      :title="`${list.id ? '编辑页面' : '新增页面'}`"
      :visible="isShowDialog"
      @close="btnCancel"
    >
      <el-form ref="formdatafn" :model="list" :rules="rules">
        标题
        <el-form-item prop="title">
          <el-input v-model="list.title" />
        </el-form-item>

        <el-form-item>
          内容 <VueEditor ref="vueEditor" :config="config" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button size="small" type="primary" @click="addfnOK">确定</el-button>
        <el-button size="small" @click="btnCancel">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  getpagesedit,
  delpagesedit,
  addpagesedit,
  updatepagesedit,
  putpagesedit,
  uppagesedit
} from '@/api/pagesedit'
import VueEditor from 'vue-word-editor'
import 'quill/dist/quill.snow.css'
export default {
  components: { VueEditor },
  data() {
    return {
      config: {},
      data: '',

      tableData: {
        _limit: '5',
        _start: '0',
        title_contains: ''
      },
      timeID: null,
      total: 0,
      pegesetting: {
        page: 1,
        pagesize: 5
      },
      formdata: [],
      list: { title: '', content: '' },
      rules: {
        title: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        content: [{ required: true, message: '该项不能为空', trigger: 'blur' }]
      },
      isShowDialog: false,
      count: ''
    }
  },
  created() {
    this.getpagesedit()
  },
  methods: {
    handleSizeChange(page) {
      // console.log(103, page)
      this.pegesetting.pagesize = page
      this.tableData._limit = page

      this.getpagesedit()
    },
    // 点击时候触发
    async currentList(newPage) {
      // console.log(905, newPage)
      // this.pegesetting.page = newPage
      this.tableData._start = (newPage - 1) * this.pegesetting.pagesize
      this.getpagesedit()
    },
    // 初始页面
    async getpagesedit() {
      this.total = await uppagesedit()
      this.formdata = await getpagesedit(this.tableData)
      // this.total = this.formdata.length

      // console.log(915, this.formdata.length)
      // console.log(84, this.formdata)
    },
    addFn() {
      this.isShowDialog = true
    },
    // 回显数据
    async putTN(id) {
      // console.log(91, id)
      this.isShowDialog = true

      this.list = await updatepagesedit(id)
      this.$refs.vueEditor.editor.root.innerHTML = this.list.content
      // console.log(96, this.list)
    },
    // 删除按钮
    async delFn(id) {
      try {
        await this.$confirm('确定删除吗？')
        await delpagesedit(id)
        this.$message.success('删除成功')
        await this.getpagesedit()
        if (this.formdata.length === 0) {
          this.tableData._start = this.tableData._start - this.tableData._limit
          if (this.tableData._start < 0) {
            this.tableData._start = 0
            this.tableData._limit = this.pegesetting.pagesize

            this.getpagesedit()
          } else {
            this.tableData._limit = this.pegesetting.pagesize
            this.getpagesedit()
          }
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 弹窗确认按钮
    async addfnOK() {
      var content = this.$refs.vueEditor.editor.root.innerHTML
      // console.log(96, content)
      this.list.content = content

      await this.$refs.formdatafn.validate()
      var quill = this.$refs.vueEditor.editor

      const lenght = quill.getLength()
      if (lenght === 1) {
        this.$message.warning('富文本不能为空')
        return
      }

      if (this.list.id) {
        await putpagesedit(this.list)
      } else {
        await addpagesedit(this.list)
      }

      this.$message.success('操作成功')

      this.isShowDialog = false
      this.list = {}
      this.$refs.vueEditor.editor.root.innerHTML = ''
      this.getpagesedit()
    },
    // 取消按钮
    btnCancel() {
      this.list = {}
      this.$refs.vueEditor.editor.root.innerHTML = ''
      this.$refs.formdatafn.resetFields()
      this.isShowDialog = false

      this.getpagesedit()
    },
    // 筛选
    async   uppagesedit() {
      clearTimeout(this.timeID)
      this.timeID = setTimeout(async() => {
        this.tableData.title_contains = this.data
        // console.log(211, this.data)
        this.tableData._start = 0
        this.tableData._limit = await uppagesedit({ title_contains: this.tableData.title_contains })

        this.formdata = await getpagesedit(this.tableData)
        this.total = this.formdata.length
        if (this.tableData.title_contains === '') {
          this.tableData._limit = 5
          this.getpagesedit()
        }
      }, 1000)

      // this.tableData.title_contains = this.data
      // this.tableData._start = 0

      // this.formdata = await getpagesedit(this.tableData)
      // this.total = this.formdata.length
      // if (this.tableData.title_contains === '') {
      //   this.getpagesedit()
      // }
    },
    inputFN() {
      clearTimeout(this.timeID)
      this.timeID = setTimeout(async() => {
        this.tableData.title_contains = this.data
        // console.log(211, this.data)
        this.tableData._start = 0
        this.tableData._limit = await uppagesedit({ title_contains: this.tableData.title_contains })
        this.formdata = await getpagesedit(this.tableData)
        this.total = this.formdata.length
        if (this.tableData.title_contains === '') {
          this.tableData._limit = 5
          this.getpagesedit()
        }
      }, 1000)
    }

  }
}
</script>

<style  scoped>
.el-pagination {
  margin-top: 10px;
}
.dashboard-container {
  margin: 15px;
}

.el-col {
  display: flex;
}
.el-divider {
  margin-top: 10px;
  /* padding: 0 100px; */
  background: #000;
}
</style>
